<template>
  <div class="home" style="height:calc(100vh - 64px)">
    <Row type="flex" justify="center" :gutter="20">
      <!-- 左侧开始 -->
      <i-col :span="16">
        <Row style="margin: 30px 0px 10px 10px;">
          <MyForm
            :subCompanyList="subCompanyList"
            :stationList="selectedStationList"
            :categoryList="categoryList"
            :actionList="selectedActionList"
            :levelList="levelList"
            @changeSubCompany="changeStationList"
            @changeCategory="changeActionList"
            @handleSearchEvent="handleSearchEvent"
            style="text-align:left;color:#fff"
          >
          </MyForm>
        </Row>
        <Row style="margin: 10px 10px;">
          <MyTable
            :tableData="resTableData"
            @handleTableEventDetail="handleTableEventDetail"
            @handleTableEventVideo="handleTableEventVideo"
          >
          </MyTable>
          <Page
            :total="pageTotal"
            :current="pageCurrent"
            :page-size="pageSize"
            @on-change="handlePageChange"
            show-total
            style="text-align:left;color: white;margin:10px 0px;"
          />
        </Row>
      </i-col>
      <!-- 左侧结束 -->
      <!-- 右侧开始 -->
      <i-col :span="8">
        <Row style="margin-top:30px;">
          <MyDetail
            :eventDetailList="eventDetailList"
            @handleDetailEventVideo="handleDetailEventVideo"
          >
          </MyDetail>
        </Row>
      </i-col>
      <!-- 右侧结束 -->
    </Row>
  </div>
</template>

<script>
// 常量
import constData from "@/util/constData2";
// api
import { reqEvent } from "@/api";
// 工具
import dayjs from "dayjs";
// 页面组件
import MyForm from "./myForm.vue";
import MyTable from "./myTable.vue";
import MyDetail from "./myDetail.vue";
import VideoPlayer from "@/components/myvideo/videoPlayer.vue";

export default {
  name: "event",
  components: {
    MyTable,
    MyForm,
    MyDetail,
    VideoPlayer
  },
  data() {
    return {
      // 选项数据
      subCompanyList: constData.subCompanyList, // 子公司列表
      subCompanyData: constData.subCompanyData,
      stationList: constData.stationList, // 站点列表
      selectedStationList: [],
      stationData: constData.stationData,
      categoryList: constData.categoryList, // 场景列表
      categoryData: constData.categoryData,
      actionList: constData.actionList, // 动作列表
      selectedActionList: [],
      levelList: constData.levelList, // 违规级别列表
      levelData: constData.levelData,
      levelStatusList: constData.levelStatusList, // 是否违规状态列表
      levelStatusData: constData.levelStatusData,

      // 表单
      formData: "",

      // 表格
      resTableData: [],
      pageTotal: 0,
      pageCurrent: 1,
      pageSize: 20,

      // 详情
      eventDetailList: [],
      videoModal: false,

      currentStation: ''
    };
  },
  created() {
    console.log('事件：', this.$route)
    let sessionStation = sessionStorage.getItem("station")

    console.log('sessionStation:', sessionStation)
    if (sessionStation) {
      this.currentStation = sessionStation
    }
  },
  methods: {
    changeStationList(subCompany) {
      this.selectedStationList = [];
      var index;
      var station;
      for (index in this.stationList) {
        station = this.stationList[index];
        if (subCompany === station.subCompany) {
          this.selectedStationList.push(station);
        }
      }
    },
    changeActionList(category) {
      this.selectedActionList = [];
      var index;
      var action;
      for (index in this.actionList) {
        action = this.actionList[index];
        if (category === action.category && action.status === "1") {
          this.selectedActionList.push(action);
        }
      }
    },
    handleSearchEvent(value) {
      // console.log("收集表单数据：", value);

      this.formData = value;


      let station = this.currentStation


      let category = value.category === "" ? "" : value.category;
      category = category === 'all' ? '' : category;
      let action = value.action === "全部" ? "" : value.action;
      let level = value.level === "4" ? "" : value.level;
      let start_time = dayjs(value.time[0]).format("YYYY-MM-DD 00:00:00");
      let end_time = dayjs(value.time[1]).format("YYYY-MM-DD 23:59:59");
      let page_index = this.pageCurrent;
      let page_size = this.pageSize;

      let params = {
        start_time: start_time,
        end_time: end_time,
        station: station,
        category: category,
        action: action,
        level: level,
        page_index: page_index,
        page_size: page_size
      };

      // console.log("发起请求参数：", params);

      reqEvent(params).then(res => {
        console.log("得到响应数据：", res);

        let resData = res.data.events;
        let tableData = resData.map((ele, index) => {
          return {
            index: index + 1,
            station: this.stationData[ele.station],
            category: this.categoryData[ele.category],
            action: ele.action,
            cause: ele.cause,
            level: this.levelData[ele.level],
            status: ele.status,
            datetime: ele.datetime,
            http_url_image: ele.http_url_image,
            http_url_video: ele.http_url_video,
            vidio_path: ele.video_path,
            videoModal: this.videoModal
          };
        });
        // 拿到响应数据后，如果右侧事件详情没有内容，就将响应数据的第一条放在右侧事件详情
        if (this.eventDetailList.length === 0) {
          this.handleTableEventDetail(tableData[0]);
        }
        this.resTableData = tableData;
        this.pageTotal = res.data.total_pages * res.data.page_size;
      });
    },
    handleTableEventDetail(value) {
      // console.log("处理事件详情：", value);

      // 取消视频自动播放
      value.videoModal = false;
      this.changeTableEventDetail(value);
    },
    handleTableEventVideo(value) {
      // console.log("处理表格视频：", value);

      value.videoModal = true;
      this.changeTableEventDetail(value);
    },
    handleDetailEventVideo(value) {
      // console.log("处理详情视频：", value);

      value.videoModal = true;
      this.changeTableEventDetail(value);
    },
    changeTableEventDetail(value) {
      // console.log("右侧事件详情：", value);

      if (value.vidio_path === "null" || value.vidio_path === "") {
        value.vidio_path = "";
        value.http_url_video = "";
      }
      this.eventDetailList.splice(0, 1, value);
    },
    handlePageChange(page) {
      // console.log("点击改变页码：", page);

      this.pageCurrent = page;
      this.handleSearchEvent(this.formData);
    }
  }
};
</script>

<style lang="less">
@background-color: #0a4271 !important;
@tab-active-color: #1181b3 !important;

.ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
  color: #fff !important;
  background: @background-color;
  border: 1px solid @background-color;
}
.ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
  color: #fff !important;
  background-color: @tab-active-color;
  border: 1px solid aqua !important;
}
</style>
